<template>
    <PageWrapper title="广告列表">
        <div class="content p-4">
            <BasicTable @register="registerTable">
                <template #mediaType="{ text }">
                    <Tag v-if="text == 1" color="volcano">图片</Tag>
                    <Tag v-else color="red">视频</Tag>
                </template>
                <template #media="{ record }">
                    <div v-if="record.media" class="unsend">
                        <TableImg class="check-img" :imgList="[record.media]" :size="40" />
                    </div>
                    <div class="unsend" v-else>未设置</div>
                </template>
            </BasicTable>
        </div>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    import { PageWrapper } from '/@/components/Page'
    import { Tag } from 'ant-design-vue'
    import { BasicTable, useTable, TableImg } from '/@/components/Table'
    import { advertListDataApi } from '/@/api/advert'
    import { AdvertListDataParams } from '/@/api/advert/model'
    import { getToken } from '/@/utils/auth'
    import { AdvertFormConfig, AdvertListColumns } from './model/model'

    export default defineComponent({
        name: 'AdvertList',
        components: { PageWrapper, BasicTable, TableImg, Tag },
        setup() {
            // 表格
            const [registerTable] = useTable({
                title: '广告列表',
                titleHelpeMessage: '展示广告列表',
                canResize: true,
                useSearchForm: true,
                bordered: true,
                rowKey: 'id',
                showTableSetting: true,
                formConfig: AdvertFormConfig,
                api: async (data) => {
                    const res = await advertListDataApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: AdvertListDataParams = {
                        token: getToken(),
                        name: pageData.name ? pageData.name : '',
                        media_type: '',
                        page: pageData.current,
                        limit: pageData.pageSize,
                    }

                    return data
                },
                columns: AdvertListColumns,
            })
            return {
                registerTable,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
